<template>
  <div class="app-container">
    <div class="app-head">
      <el-form>
        <el-row type="flex" justify="start">
          <el-col :span="14">
            <el-form-item label="身份标识" label-width="110px">
              <el-input v-model.trim="person" class="sizeInput" size="mini" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="平台账号" label-width="180px">
              <el-input v-model.trim="platMount" class="sizeInput2" size="mini" />
            </el-form-item>
          </el-col>
          <el-col :span="1" class="absolute main-button">
            <el-button
              v-powerbtn="{power: find}"
              size="mini"
              round
              type="primary"
              icon="el-icon-search"
              @click="serach"
            >查询</el-button>
          </el-col>
        </el-row>
        <el-row type="flex" justify="start">
          <el-col :span="14">
            <el-form-item label="开户时间" label-width="110px">
              <el-date-picker
                v-model="startDate"
                :picker-options="pickerOptions1"
                :editable="false"
                type="datetime"
                size="mini"
                format="yyyy-MM-dd HH:mm:ss"
                value-format="yyyy-MM-dd HH:mm:ss   "
                placeholder="选择开始时间"
                class="timeLength"
                @change="checkStartTime"
              />
              至
              <el-date-picker
                v-model="endDate"
                :picker-options="pickerOptions2"
                :editable="false"
                type="datetime"
                size="mini"
                format="yyyy-MM-dd HH:mm:ss"
                value-format="yyyy-MM-dd HH:mm:ss   "
                placeholder="选择结束时间"
                class="timeLength"
                @change="checkTime"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="是否匹配其他平台账号" label-width="180px">
              <el-select v-model="accountValue" class="sizeInput2" size="mini" placeholder="请选择">
                <el-option
                  v-for="item of account"
                  :key="item.value"
                  :value="item.value"
                  :label="item.label"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="1" class="absolute main-button">
            <el-button
              size="mini"
              round
              icon="el-icon-refresh"
              @click="reset"
            >重置</el-button>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="app-table">
      <el-table
        :data="list"
        border
        style="width: 100%"
      >
        <el-table-column label="平台账号">
          <template slot-scope="scope">
            <el-popover
              v-if="scope.row.userId"
              :content="scope.row.userId"
              placement="top"
              trigger="hover">
              <span slot="reference" style="cursor:pointer" type="info">{{ scope.row.userId }}</span>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column label="身份标识">
          <template slot-scope="scope">
            <el-popover
              v-if="scope.row.userCenterId"
              :content="scope.row.userCenterId"
              placement="top"
              trigger="hover">
              <span slot="reference" style="cursor:pointer" type="info">{{ scope.row.userCenterId }}</span>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column label="开户时间">
          <template slot-scope="scope">
            <el-popover
              v-if="scope.row.userCreatetime"
              :content="scope.row.userCreatetime"
              placement="top"
              trigger="hover">
              <span slot="reference" style="cursor:pointer" type="info">{{ scope.row.userCreatetime }}</span>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column label="是否匹配其他平台账号" width="180">
          <template slot-scope="scope">
            {{ scope.row.bindingStatus === '1' ? '是' : '否' }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="350">
          <template slot-scope="scope">
            <el-button
              v-powerbtn="{power: watchs}"
              type="primary"
              plain
              round
              size="mini"
              @click="watch(scope.row.userId, scope.row.platformId)"
            >查看</el-button>
            <el-button
              v-powerbtn="{power: connects}"
              :disabled="scope.row.bindingStatus === '1' ? false : true"
              type="primary"
              round
              plain
              size="mini"
              @click="connect(scope.row.userCenterId)"
            >关联平台</el-button>
            <!-- <el-button
              v-show="general"
              type="primary"
              plain
              size="mini"
              icon="el-icon-third-user"
              @click="userInfo()"
            >用户通用信息</el-button> -->
            <el-button
              v-powerbtn="{power: point}"
              type="primary"
              plain
              round
              size="mini"
              @click="userInfo(scope.row)"
            >积分</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination-container">
        <el-pagination
          :current-page="pageid"
          :page-sizes="[20,50,100]"
          :page-size="pagecount"
          :total="count"
          background
          highlight-current-row
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
    <watch-info :dialog-table-visible="dialogTableVisible" :id="id" :platform-id="platformIdNew" @closeDialog="closeDialog" />
    <connect-plat v-if="stat" :platform-id="platformIdNew" :connect-dialog="connectDialog" :ids="ids" :search-request="searchRequest" @closeConnect="closeConnect" />
    <user-point :point-dialog="pointDialog" :info="info" @closePoint="closePoint" />
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
import secret from '@/utils/secret'
import { getList } from '@/api/liantong'
import WatchInfo from './components/watch.vue'
import ConnectPlat from './components/connect.vue'
import UserPoint from './components/point.vue'
import powerbtn from '@/directive/powerbtn/index.js'
export default {
  name: 'Liantong',
  directives: {
    powerbtn
  },
  components: {
    WatchInfo: WatchInfo,
    ConnectPlat: ConnectPlat,
    UserPoint: UserPoint
  },
  data() {
    return {
      find: '',
      point: '',
      connects: '',
      general: '',
      integral: '',
      watchs: '',
      powerful: null,
      date: null,
      status: true,
      platformIdNew: '',
      stat: false,
      account: [{
        value: '',
        label: '全部'
      }, {
        value: '1',
        label: '是'
      }, {
        value: '0',
        label: '否'
      }],
      list: null,
      searchRequest: Object, // 请求数据
      platformId: '', // 平台标识id
      accountValue: '', // 下拉选择
      id: null, // 身份标识
      ids: null, // 身份标识
      person: '', // 身份标识
      resultDate: ['', ''], // time
      endDate: '', // 结束时间
      startDate: '', // 开始日期
      platMount: '', // 平台账号
      pageid: 1, // 当前页数
      pagecount: 20, // 每页显示条数
      count: null, // 总数量
      pages: null, // 总页数
      info: null, // 积分信息
      dialogTableVisible: false, // 查看遮罩
      connectDialog: false, // 关联遮罩
      pointDialog: false, // 积分遮罩
      search: null, // 搜索权限按钮
      platform: false, // 平台按钮权限
      param: Object, // 搜索条件
      flag: true,
      pickerOptions1: {
        disabledDate(time) {
          return time.getTime() > Date.now()
        }
      },
      pickerOptions2: {
        disabledDate(time) {
          return time.getTime() > Date.now()
        }
      }
    }
  },
  computed: {
    ...mapGetters(['assignment', 'token'])
  },
  watch: {
    $route(to, from) {
      this.powerful = this.$route.meta.powerName
      this.find = this.$route.meta.powerName + '-search' // 搜索权限按钮
      this.point = this.$route.meta.powerName + '-integral' // 积分权限按钮
      this.connects = this.$route.meta.powerName + '-platform' // 关联平台
      this.general = this.$route.meta.powerName + '-general' // 关联平台
      this.watchs = this.$route.meta.powerName + '-find' // 查看权限按钮
      this.person = '' // 身份标识重置
      this.platMount = '' // 平台账号
      this.accountValue = '' // 状态
      this.startDate = ''
      this.endDate = ''
      this.pageid = 1
      this.pagecount = 20
      this.param.userCenterId = ''
      this.param.userId = ''
      this.param.bindingStatus = ''
      this.param.starttime = ''
      this.param.endtime = ''
      var len = this.$route.meta.platformId.indexOf('-')
      this.platformId = this.$route.meta.platformId.substr(len + 1)
      console.log(this.$route.meta)
      console.log('请求参数')
      const data = {
        platformId: this.platformId + '', // 平台标识ID
        userCenterId: this.person, // 唯一身份标识
        userId: this.platMount + '', // 平台账号
        bindingStatus: this.accountValue, // 是否匹配全部平台
        starttime: this.startDate, // 开始时间
        endtime: this.endDate, // 结束时间
        pageid: 1,
        pagecount: 20
      }
      console.log(data)
      this.loadList(data)
    }
  },
  created() {
    // this.powerful = this.$route.meta.powerName
    // console.log(this.powerful)
    var len = this.$route.meta.platformId.indexOf('-')
    this.platformId = this.$route.meta.platformId.substr(len + 1)
    // console.log(this.platformId)
    // this.search = this.$route.meta.powerName + '-search' // 搜索权限按钮
    // this.integral = this.$route.meta.powerName + '-point' // 积分权限按钮
  },
  mounted() {
    /* console.log(this.$route.meta.platformId) */
    // this.powerful = this.$route.meta.powerName
    // console.log(this.powerful)
    // 监听值改变获取按钮权限
    /* this.search = powerful + '-search' // 搜索权限按钮
    this.find = false // 查看权限按钮
    this.general = false // 用户通用信息按钮权限
    this.integral = powerful + '-point' // 积分权限按钮
    this.platform = false // 平台按钮权限 */
    /* var that = this
    var btnList = this.$route.meta.btnList
    btnList.forEach(function(item) {
      if (!!item) { // eslint-disable-line
        if (item.code.indexOf('search') >= 0) {
          that.search = true
        }
        if (item.code.indexOf('find') >= 0) {
          that.find = true
        }
        if (item.code.indexOf('general') >= 0) {
          that.general = true
        }
        if (item.code.indexOf('integral') >= 0) {
          that.integral = true
        }
        if (item.code.indexOf('platform') >= 0) {
          that.platform = true
        }
      }
    }) */
    // 获取页面初加载请求
    this.find = this.$route.meta.powerName + '-search' // 搜索权限按钮
    this.point = this.$route.meta.powerName + '-integral' // 积分权限按钮
    this.connects = this.$route.meta.powerName + '-platform' // 关联平台
    this.general = this.$route.meta.powerName + '-general' // 关联平台
    // this.integral = this.$route.meta.powerName + '-point' // 积分权限按钮
    this.watchs = this.$route.meta.powerName + '-find' // 查看权限按钮
    var len = this.$route.meta.platformId.indexOf('-')
    this.platformId = this.$route.meta.platformId.substr(len + 1)
    console.log('请求参数')
    const data = {
      // token: this.token,
      platformId: this.platformId + '', // 平台ID
      userCenterId: this.person, // 唯一身份标识
      userId: this.platMount + '', // 平台账号
      bindingStatus: this.accountValue, // 是否匹配全部平台
      starttime: this.startDate, // 开始时间
      endtime: this.endDate, // 结束时间
      pageid: 1,
      pagecount: 20
    }
    console.log(data)
    this.loadList(data)
  },
  methods: {
    // 当前页面改变时
    handleSizeChange(num) {
      this.flag = false
      this.pagecount = num
      if (this.startDate === null) {
        this.startDate = ''
      }
      if (this.endDate === null) {
        this.endDate = ''
      }
      if (!this.param) {
        this.param.userCenterId = ''
        this.param.userId = ''
        this.param.bindingStatus = ''
        this.param.starttime = ''
        this.param.endtime = ''
      }
      const data = {
        // token: this.token,
        platformId: this.platformId, // 平台ID
        userCenterId: this.param.userCenterId, // 唯一身份标识
        userId: this.param.userId, // 平台账号
        bindingStatus: this.param.bindingStatus, // 是否匹配全部平台
        starttime: this.param.starttime, // 开始时间
        endtime: this.param.endtime, // 结束时间
        pageid: 1,
        pagecount: parseInt(num)
      }
      getList(secret.Encrypt(data)).then(response => {
        this.flag = true
        this.pageid = 1
        this.list = response.data.list // 列表项
        this.count = parseInt(response.data.count) // 总数量
        console.log(response.data)
      }).catch(() => {
        this.$message({
          message: '请求列表失败，请重试',
          type: 'error'
        })
      })
    },
    // 跳转某页
    handleCurrentChange(num) {
      if (this.startDate === null) {
        this.startDate = ''
      }
      if (this.endDate === null) {
        this.endDate = ''
      }
      console.log(this.param)
      if (this.param.userCenterId === undefined) {
        this.param.userCenterId = ''
        this.param.userId = ''
        this.param.bindingStatus = ''
        this.param.starttime = ''
        this.param.endtime = ''
      }
      const data = {
        // token: this.token,
        platformId: this.platformId, // 平台ID
        userCenterId: this.param.userCenterId, // 唯一身份标识
        userId: this.param.userId, // 平台账号
        bindingStatus: this.param.bindingStatus, // 是否匹配全部平台
        starttime: this.param.starttime, // 开始时间
        endtime: this.param.endtime, // 结束时间
        pageid: num,
        pagecount: this.pagecount
      }
      console.log('请求参数')
      console.log(data)
      // if (this.flag === true) {
      getList(secret.Encrypt(data)).then(response => {
        this.list = response.data.list // 列表项
        this.count = parseInt(response.data.count) // 总数量
        this.pageid = num // 当前页数
        console.log(response.data)
      }).catch(() => {
        this.$message({
          message: '请求列表失败，请重试',
          type: 'error'
        })
      })
      // }
    },
    // 查询列表
    loadList(data) {
      console.log(data)
      getList(secret.Encrypt(data)).then(response => {
        this.list = response.data.list
        if (response.data.list === null) {
          this.count = 0
        } else {
          this.count = parseInt(response.data.count)
        }
        this.searchRequest = data
        this.stat = true
        this.pages = parseInt(response.data.pages) // 总页数
        this.pageid = 1 // 当前页数
      })
    },
    // 校验结束时间
    checkTime(time) {
      var selectTime
      const newStr = new RegExp('-', 'g')
      if (!!time) { // eslint-disable-line
        selectTime = new Date(time.replace(newStr, '/')).getTime() // 所选时间
      } else {
        selectTime = ''
      }
      const nowTime = Date.now() // 现在的时间
      if (selectTime > nowTime) {
        this.$alert('所选时间不能大于当前时间！', '提示', {
          confirmButtonText: '确定',
          callback: action => {
            this.endDate = ''
          }
        })
      } else {
        if (!!time) {  // eslint-disable-line
          var start
          if (this.startDate !== null) {
            start = new Date(this.startDate.replace(newStr, '/')).getTime()
          } else {
            start = ''
          }
          var end = new Date(time.replace(newStr, '/')).getTime()
          if (end < start) {
            this.$message({
              message: '开始时间不能大于结束时间',
              type: 'error'
            })
            this.endDate = ''
          }
        }
      }
    },
    // 校验开始时间
    checkStartTime(time) {
      const newStr = new RegExp('-', 'g')
      // 比较是否大于现在的时间
      var selectTime
      if (!!time) { // eslint-disable-line
        selectTime = new Date(time.replace(newStr, '/')).getTime() // 所选时间
      } else {
        selectTime = ''
      }
      const nowTime = Date.now() // 现在的时间
      if (selectTime > nowTime) {
        this.$alert('所选时间不能大于当前时间！', '提示', {
          confirmButtonText: '确定',
          callback: action => {
            this.startDate = ''
          }
        })
      } else {
        if (!!time) {  // eslint-disable-line
          var end
          if (this.endDate !== null) {
            end = new Date(this.endDate.replace(newStr, '/')).getTime()
          } else {
            end = ''
          }
          var first = new Date(time.replace(newStr, '/')).getTime()
          if (!!end && first > end) {
            this.$message({
              message: '开始时间不能大于结束时间',
              type: 'error'
            })
            this.startDate = ''
          }
        }
      }
    },
    // 查询
    serach() {
      if (this.startDate === null) {
        this.startDate = ''
      }
      if (this.endDate === null) {
        this.endDate = ''
      }
      var data = {
        // token: this.token,
        platformId: this.platformId + '', // 平台ID
        userCenterId: this.person, // 唯一身份标识
        userId: this.platMount, // 平台账号
        bindingStatus: this.accountValue, // 是否匹配全部平台
        starttime: this.startDate, // 开始时间
        endtime: this.endDate, // 结束时间
        pageid: 1,
        pagecount: this.pagecount
      }
      this.param = data
      console.log('请求参数')
      this.loadList(data)
    },
    // 查看
    watch(id, platfromId) {
      this.dialogTableVisible = true
      this.platformIdNew = platfromId
      this.id = id
    },
    // 关联平台
    connect(id) {
      this.connectDialog = true
      this.ids = id
    },
    // 积分
    userInfo(info) {
      this.pointDialog = true
      this.info = info
    },
    // 父子组件回调
    closeDialog() {
      this.dialogTableVisible = false
    },
    closeConnect(e) {
      this.connectDialog = false
      if (!!e) { // eslint-disable-line
        this.loadList(e)
      }
    },
    closePoint() {
      this.pointDialog = false
    },
    // 重置
    reset() {
      this.person = ''
      this.platMount = ''
      this.startDate = ''
      this.endDate = ''
      this.accountValue = ''
    }
  }
}
</script>
<style>
  .el-date-editor .el-range-separator{
    width:7% !important;
  }
  .row-bg{
    margin:10px 20px;
  }
  .timeLength{
    width: 199px !important
  }
  .dowhile{
    font-weight: bold;
  }
  .sizeInput{
    width:199px;
  }
  .sizeInput2{
    width: 199px
  }
  .absolute{
    right: 30px;
    top: 8px;
  }
  .app-head{
    padding: 6px 10px 0px 10px;
    border-radius: 10px;
  }
  .el-form-item{
    margin-bottom: 2px;
  }
  .pagination-container {
    width: 900px !important;
    margin: 9px auto 0px auto !important;
  }
</style>
